import React, { Component } from 'react';
import Taro from '@tarojs/taro';
import {View} from '@tarojs/components'
import {AtIcon} from "taro-ui";
import GzhAuth from "../../../components/gzh-auth/gzh-auth"
import {GetRequest, vcmonitor} from "../../../utils/tools";
import {INVOICE_ORDER_INVOICE_DETAIL, TARO_ENV} from "../../../constants/api";
import {http} from "../../../utils/http";
import './invoice.scss'

interface StateType {
  info: any
  showInvoiceImage: any
}

export default class Invoice extends Component {
  state: StateType = {
    info: {},
    showInvoiceImage: false
  }

  async UNSAFE_componentWillMount() {
    vcmonitor(this)
    this.orderNum = Taro.getCurrentInstance().router.params.orderNum || ''
    const data = await http.HGet(INVOICE_ORDER_INVOICE_DETAIL, { order_num: this.orderNum })
    this.setState({info: data.data})
  }

  orderNum

  imgClick() {
    Taro.previewImage({
      current: this.state.info.invoice_url,
      urls: [this.state.info.invoice_url]
    })
  }

  savePhoto() {
    if (TARO_ENV === 'h5'){
      return
    }
    Taro.showLoading({title: '下载中...'})
    Taro.getImageInfo({
      src: this.state.info.invoice_url,
    }).then((res) => {
      Taro.saveImageToPhotosAlbum({
        filePath: res.path,
      }).then(() => {
        Taro.hideLoading()
        Taro.showToast({
          title: '保存成功，请进入相册查看',
          icon: 'none'
        })
      })
    }).catch(err => {
      Taro.hideLoading()
      console.log(err)
    })
  }

  render() {
    const {info, showInvoiceImage} = this.state
    return (
      <View className='Invoice-Information-Invoice-Detail'>
        <GzhAuth />
        <View className='detail-top-wrapper'>
          <View className='detail-top-wrapper-content'>
            <View className='title-status'><AtIcon value='icon icon-chenggong' size='16' customStyle='margin-right: 6px' color='#fff' />{info.condition}</View>
            <View className='title-price'>{ info.refuse_cause || (info.condition === '开票中' ? '正在开具发票，请耐心等待~' : info.condition === '已开票' ? '已开发票金额：￥' + info.money : '') }</View>
          </View>
        </View>
        <View className='invoice-detail-content'>
          <View className='invoice-detail-content-items'>
            <View className='invoice-detail-content-items-left'>发票类型</View>
            <View className='invoice-detail-content-items-right'>电子普通发票</View>
          </View>
          <View className='invoice-detail-content-items'>
            <View className='invoice-detail-content-items-left'>抬头类型</View>
            <View className='invoice-detail-content-items-right'>{info.invoicetitle_type ? '企业' : '个人'}</View>
          </View>
          <View className='invoice-detail-content-items'>
            <View className='invoice-detail-content-items-left'>抬头名称</View>
            <View className='invoice-detail-content-items-right'>{info.invoicetitle_name}</View>
          </View>
          <View className='invoice-detail-content-items'>
            <View className='invoice-detail-content-items-left'>开票金额</View>
            <View className='invoice-detail-content-items-right'>{info.money}</View>
          </View>
          <View className='invoice-detail-content-items'>
            <View className='invoice-detail-content-items-left'>开票时间</View>
            <View className='invoice-detail-content-items-right'>{info.make_date || '-'}</View>
          </View>
          <View className='invoice-detail-content-items'>
            <View className='invoice-detail-content-items-left'>申请时间</View>
            <View className='invoice-detail-content-items-right'>{info.add_date}</View>
          </View>
          {info.condition === '已开票' && <View className='view-invoice' onClick={()=> Taro.navigateTo({ url: `/main/order/invoice/send-email?id=${info.id}&url=${info.invoice_url}` })}>点击查看发票</View>}
          {info.refuse_cause && <View className='view-invoice' onClick={()=> {
            let mpkey = ''
            const uInfo = Taro.getStorageSync('user') || ''
            if (uInfo && uInfo.mpkey && uInfo.mpkey !== 'undefined') {
              mpkey = uInfo.mpkey
            }
            Taro.redirectTo({ url: `/main/order/invoice/invoice?orderNum=${this.orderNum}&isUpdate=true` + '&mpkey=' + mpkey }) }
          }
          >修改发票信息</View>}
        </View>
        {/*{showInvoiceImage && <View className='share-poster'>*/}
        {/*  <View className='share-poster-bg' />*/}
        {/*  <View className='share-poster-container'>*/}
        {/*    <View className='share-poster-body'>*/}
        {/*      <View onClick={() => this.setState({showInvoiceImage: false})} className='share-poster-close'>*/}
        {/*        <AtIcon value='close-circle' size='24' color='#fff' />*/}
        {/*      </View>*/}
        {/*      <View onClick={this.imgClick.bind(this)}>*/}
        {/*        <Image className='gzh-close-img' src={this.state.info.invoice_url} mode='widthFix' />*/}
        {/*      </View>*/}
        {/*      <View className='saveToPhoto-box' onClick={this.savePhoto.bind(this)}>*/}
        {/*        {TARO_ENV === 'weapp' ? <View className='saveToPhoto'>保存到相册</View> :*/}
        {/*          <View className='saveToPhoto'>请长按图片保存至相册</View>}*/}
        {/*      </View>*/}
        {/*    </View>*/}
        {/*  </View>*/}
        {/*</View>}*/}
      </View>
    )
  }
}
